import React, { Component } from "react";
import "./css/01-index.css";

let ChildA = () => {
  let styleA = {
    backgroundColor: "red",
  };
  return <div style={styleA}>ChildA组件</div>;
};
let ChildB = () => {
  return <div style={{ backgroundColor: "green" }}>ChildB组件</div>;
};
let ChildC = () => {
  return (
    <fieldset>
      <legend>childc组件</legend>
      <div className="active">childc组件</div>
      <label htmlFor="username">用户名: </label>
      <input type="text" id="username" />
      <ChildCChild></ChildCChild>
    </fieldset>
  );
};
let ChildCChild = () => {
  return <div>childc组件的子组件ChildCChild</div>;
};

export default class App extends Component {
  render() {
    return (
      <section>
        <ChildA />
        <ChildB />
        <ChildC />
      </section>
    );
  }
}
